<script setup>
import { ref, reactive } from 'vue'
import instance from '../utils/request'
import { useRouter } from 'vue-router'
let router = useRouter()
let registUser = reactive({
    username: '',
    userPwd: '',
})

let reUserPwd = ref('')
let usernameMsg = ref('')
let userPwdMsg = ref('')
let reUserPwdMsg = ref('')

async function checkUsername() {
    let usernameReg = /^[a-zA-Z0-9]{5,10}$/
    if (!usernameReg.test(registUser.username)) {
        usernameMsg.value = '格式错误'
        return false;
    }
    let { data } = await instance.post(`/user/checkUserPwd?username=${registUser.username}`)
    if (data.code != 200) {
        usernameMsg.value = '用户名已存在'
        return false;
    }
    usernameMsg.value = '用户名可用'
    return true;
}

function checkUserPwd() {
    let passwordReg = /^[0-9]{6}$/
    if (!passwordReg.test(registUser.userPwd)) {
        userPwdMsg.value = '格式错误'
        return false;
    }
    userPwdMsg.value = 'OK'
    return true;
}

function checkReUserPwd() {
    let passwordReg = /^[0-9]{6}$/
    if (!passwordReg.test(reUserPwd.value)) {
        reUserPwdMsg.value = '格式错误'
        return false;
    }
    if (reUserPwd.value !== registUser.userPwd) {
        reUserPwdMsg.value = '两次密码不正确'
        return false;
    }
    reUserPwdMsg.value = 'OK'
    return true;
}
async function regist() {
    let user = await checkUsername()
    let password = await checkUserPwd()
    let repassword = await checkReUserPwd()
    if (user && password && repassword) {
        let { data } = await instance.post('/user/regist', registUser).then(res => {
            if (res.data.code == 200) {
                console.log(res.data)
                alert('注册成功')
                router.push('/login')
            } else {
                alert('注册失败')
            }
        }).catch(err => {
            console.error(err)
        })
    } else {
        alert('校验失败不能注册')
    }
}
</script>

<template>
    <div>
        <h3 class="ht">请注册</h3>

        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" id="usernameInput" type="text" name="username" v-model="registUser.username"
                        @blur="checkUsername()">

                    <span id="usernameMsg" class="msg" v-text="usernameMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" id="userPwdInput" type="password" name="userPwd" v-model="registUser.userPwd"
                        @blur="checkUserPwd()">
                    <span id="userPwdMsg" class="msg" v-text="userPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>确认密码</td>
                <td>
                    <input class="ipt" id="reUserPwdInput" type="password" v-model="reUserPwd" @blur="checkReUserPwd()">
                    <span id="reUserPwdMsg" class="msg" v-text="reUserPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="button" @click="regist()" value="注册">
                    <input class="btn1" type="button" value="重置">
                    <router-link to="/login">
                        <button class="btn1">去登录</button>
                    </router-link>
                </td>
            </tr>
        </table>


    </div>
</template>

<style scoped>
.ht {
    text-align: center;
    color: cadetblue;
    font-family: 幼圆;
}

.tab {
    width: 500px;
    border: 5px solid cadetblue;
    margin: 0px auto;
    border-radius: 5px;
    font-family: 幼圆;
}

.ltr td {
    border: 1px solid powderblue;

}

.ipt {
    border: 0px;
    width: 50%;

}

.btn1 {
    border: 2px solid powderblue;
    border-radius: 4px;
    width: 60px;
    background-color: antiquewhite;

}

.msg {
    color: gold;
}

.buttonContainer {
    text-align: center;
}
</style>
